<div class="generic-table--sort-header-outer"  aria-hidden="true">
  <span class="hierarchy-header--outer-span" ng-if="isHierarchyColumn">
    <accessible-by-keyboard execute="toggleHierarchy($event)"
                            ng-if="!isHierarchyDisabled"
                            link-title="{{ text.toggleHierarchy }}"
                            link-aria-label="{{ text.toggleHierarchy }}"
                            link-class="hierarchy-header--icon"
                            span-class="icon {{ hierarchyIcon }}"
                            aria-hidden="true">
    </accessible-by-keyboard>
    <a href="javascript://"
       class="hierarchy-header--sort-title"
       ng-if="sortable"
       ng-class="[directionClass && 'sort', directionClass]"
       lang-attribute
       lang="{{locale}}"
       id="{{ column.id }}">{{column.name}}</a>
    <a ng-if="!sortable">{{column.name}}</a>
    <icon-wrapper css-class="dropdown-indicator icon-small"
                  icon-name="pulldown"
                  title="{{ text.openMenu }}"></icon-wrapper>
  </span>
  <span class="generic-table--sort-header" ng-if="!isHierarchyColumn">
    <a href="javascript://"
       ng-if="sortable"
       ng-class="[directionClass && 'sort', directionClass]"
       lang-attribute
       lang="{{locale}}"
       id="{{ column.id }}">{{column.name}}</a>
    <a ng-if="!sortable">{{column.name}}</a>
    <icon-wrapper css-class="dropdown-indicator icon-small"
                  icon-name="pulldown"
                  title="{{ text.openMenu }}"></icon-wrapper>
  </span>
</div>
